import { getCurrentInstance, PropType, defineComponent, ComponentInternalInstance } from "vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
// import { getGatewayList } from "@/api/modules/iot/gateway";
// import { GatewayType } from "@/api/interface/iot";
import { getDeviceListAll } from "@/api/modules/iot/device";
import { deptAnonymous } from "@/utils/constants";
import { Device } from "@/api/interface/iot";
import "./SelectList.scss";
export default defineComponent({
	props: {
		// todo: 需要改造成v-model
		detail: {
			type: Object,
			default() {
				return {};
			}
		},
		gatewayMap: {
			type: Object as PropType<{ [key: string]: Device.ResGateway }>,
			default() {
				return {};
			}
		}
	},
	emits: [],
	setup(props) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const gatewayTreeCallback = (data: any) => {
			return data.records;
		};
		const changeGateway = (data: any) => {
			props.detail.gatewaySn = data.sn;
		};
		const status = reactive<any>({
			dataList: []
		});
		onMounted(async () => {
			getDataList();
		});
		const getDataList = async () => {
			let dataList = [];
			try {
				let res = await getDeviceListAll({ pageIndex: 1, pageSize: 9999, typeNot: "device", deptIdNot: deptAnonymous });
				dataList = res.result?.records || [];
				dataList.forEach((item: any) => {
					props.gatewayMap[item.sn] = item;
				});
				// let res = await getGatewayList({ pageIndex: 1, pageSize: 9999 }, GatewayType.SoftGateway);
				// dataList = res.result?.records || [];
				// res = await getGatewayList({ pageIndex: 1, pageSize: 9999 }, GatewayType.Gateway);
				// dataList = [...dataList, ...(res.result?.records || [])];
			} catch (e) {
				console.log(e);
			}
			status.dataList = dataList;
		};
		return () => {
			return (
				<div class="w-full select-gageway">
					{true ? null : (
						<TreeFilter
							requestApi={getDataList}
							label="deptName"
							dataCallback={gatewayTreeCallback}
							defaultValue={props.detail.gatewaySn}
							isCheckStrictly={true}
							clearable
							onChange={(data: any) => changeGateway(data)}
						/>
					)}
					<el-select-v2
						class="w-full"
						v-model={props.detail.gatewaySn}
						placeholder={proxy?.$t("device.search_placeholder.gatewaySn")}
						clearable
						filterable
						options={status.dataList}
						props={{ label: "name", value: "sn" }}
						v-slots={{
							default: ({ item }) => (
								<div class="flex justify-between">
									<span style="margin-right: 8px">{item.name || item.sn}</span>
									<span style="color: var(--el-text-color-secondary); font-size: 13px">{item.sn}</span>
								</div>
							)
						}}
					></el-select-v2>
				</div>
			);
		};
	}
});
